<template>
  <div class="app-container">
    <!--    隐藏域 记录id-->

    <el-form ref="form" :model="book" label-width="120px">
      <el-form-item label="书名">
        <el-input type="text" v-model="book.name" />
      </el-form-item>
      <el-form-item label="作者">
        <el-input  type="text" v-model="book.author" />
      </el-form-item>

      <el-form-item label="该书所在图书馆">
        <el-select value="请选择" v-model="book.library">
          <el-option :value="item"v-for="(item,index) in libArr" >
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="该书所属类别">
        <el-select value="请选择" v-model="book.category">
          <el-option :value="item" v-for="(item,index) in cateArr">
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否借出？0代表未借出,1代表已借出">
        <el-select v-model="book.islend">
          <el-option :value="item.value" :label="item.label" v-for="item in lendArr">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="书的详细信息">
        <el-input type="text" v-model="book.info"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"  @click="onSubmit">新增书籍</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      book:{
        id:0,
        name:"",
        author:"",
        library:"",
        category:"",
        islend:null,
        info:""
      },
      libArr:[


      ],
      cateArr:[


      ],
      lendArr:[
        {value:0,label:"未借出"},
        {value:1,label:"已借出"}
      ]
    }
  },
  mounted() {

    request({
      url:"/library/book/selectlib.do",
      method: "GET",
    }).then(res=>{
      if(res.code==0){
        //跳转到列表页面

        this.libArr = res.data

      }
    })
    request({
      url:"/library/book/selectcag.do",
      method: "GET",
    }).then(res=>{
      if(res.code==0){
        //跳转到列表页面

        this.cateArr = res.data

      }
    })






  },
  methods: {
    onSubmit() {
      // 请求接口 实现用户新增接口的调用
      request({
        url:"/library/book/save.do",
        method: "POST",
        data:this.book
      }).then(res=>{
        if(res.code==0){
          //跳转到列表页面
          this.$router.push("/booklist");
        }
      })
    },
    checkPass() {},
    onCancel() {
      this.$message({
        message: '取消用户的新增',
        type: 'warning'
      }),
        this.$router.push("/booklist");
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

